// FAQ.tsx
import React, { useState } from 'react';

// 定义问题分类的数据模型
export interface FAQCategory {
    title: string; // 分类标题
    faqs: FAQ[];   // 该分类下的常见问题
}

// 定义常见问题的数据模型
export interface FAQ {
    question: string; // 提问
    answer: string;   // 答案
}

const FAQComponent: React.FC = () => {
    const categories: FAQCategory[] = [
    {
        title: "常见问题",
        faqs: [
            {
                question: "如何编辑文字？",
                answer: "编辑文字：选中文字后，可在右侧面板对字体、颜色、大小、倾斜、加粗、对齐、透明度、特效等修改。",
            },
            {
                question: "如何注册账户？",
                answer: "您可以通过点击首页的注册按钮进行注册。",
            },
            {
                question: "如何重置密码？",
                answer: "请点击登录页的“忘记密码”链接。",
            },
        ],
    },
    {
        title: "快捷键",
        faqs: [
            {
                question: "如何复制文本？",
                answer: "您可以使用 Ctrl + C（在Mac上是 Command + C）来复制选中的文本。",
            },
            {
                question: "如何粘贴文本？",
                answer: "使用 Ctrl + V（在Mac上是 Command + V）将复制的文本粘贴到目标位置。",
            },
            {
                question: "如何撤销操作？",
                answer: "使用 Ctrl + Z（在Mac上是 Command + Z）可以撤销上一个操作。",
            },
        ],
    },
    {
        title: "提个建议",
        faqs: [
            {
                question: "如何反馈我的建议?",
                answer: "您可以通过联系我们页面填写反馈表单提交您的建议。",
            },
            {
                question: "反馈需要多久被处理？",
                answer: "一般情况下，我们会在3-5个工作日内回复您的反馈。",
            },
        ],
    },
    {
        title: "在线客服",
        faqs: [
            {
                question: "如何联系在线客服？",
                answer: "您可以通过网站右下角的聊天窗口与我们的在线客服联系。",
            },
            {
                question: "在线客服的工作时间是什么时候？",
                answer: "我们的在线客服工作时间为每天9:00 - 18:00。",
            },
            {
                question: "客服可以帮助我做什么？",
                answer: "我们的客服可以帮助您解决使用过程中遇到的问题，或提供有关产品的详细信息。",
            },
        ],
    }
];

    const [isVisible, setIsVisible] = useState(false);
    const [history, setHistory] = useState<(FAQCategory | null)[]>([null]); // 记录访问历史
    const [currentFAQ, setCurrentFAQ] = useState<FAQ | null>(null);
    const [title, setTitle] = useState<string>('帮助中心'); // 动态标题

    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

    const toggleVisibility = () => {
        setIsVisible(!isVisible);
        if (isVisible) {
            setHistory([null]); // 重置历史
            setCurrentFAQ(null);
            setTitle('帮助中心'); // 重置标题
        }
    };

    const handleCategoryClick = (category: FAQCategory) => {
        setHistory((prev) => [...prev, category]); // 添加到历史中
        setCurrentFAQ(null);
        setTitle(category.title); // 更新标题
    };

    const handleQuestionClick = (faq: FAQ) => {
        setCurrentFAQ(faq);
        setTitle(faq.question); // 更新标题为当前问题
    };

    const handleBack = () => {
        const newHistory = [...history];
        newHistory.pop(); // 移除当前层级
        setHistory(newHistory);

        if (newHistory.length === 0 || newHistory[newHistory.length - 1] === null) {
            setCurrentFAQ(null);
            setTitle('帮助中心'); // 返回到选择分类时的标题
        } else {
            const lastEntry = newHistory[newHistory.length - 1];
            setCurrentFAQ(null); // 清空当前问题
            setTitle(lastEntry ? lastEntry.title : '帮助中心'); // 更新标题为上一级的标题
        }
    };

    const currentCategory = history[history.length - 1];

    return (
        <div style={{ position: 'fixed', margin: '20px', zIndex: 999 }}>
            <button
                onClick={toggleVisibility}
                style={{
                    borderRadius: '50%',
                    backgroundColor: '#ffffff',
                    color: '#000',
                    padding: '10px 15px',
                    fontSize: '16px',
                    cursor: 'pointer',
                    border: 'none',
                    position: 'fixed',
                    bottom: '50px',
                    right: '20px'
                }}
            >
                {isVisible ? 'X' : '?'}
            </button>
            {isVisible && (
                <div style={{
                    position: 'fixed',
                    bottom: '100px',
                    right: '-140px',
                    transform: 'translateX(-50%)',
                    backgroundColor: '#f9f9f9',
                    border: '1px solid #ddd',
                    borderRadius: '8px',
                    padding: '10px',
                    width: '300px',
                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
                }}>
                    {title === '帮助中心' ? (
                        <h3 style={{ color: 'black', fontWeight: 'bold' }}>
                            {title}
                        </h3>
                    ) : (
                        <h3 onClick={handleBack} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>
                            &lt; {title}
                        </h3>
                    )}
                    {currentFAQ ? (
                        <p style={{ color: 'black' }}>{currentFAQ.answer}</p>
                    ) : (
                        <div>
                            {currentCategory ? (
                                currentCategory.faqs.map((faq, index) => (
                                    <div
                                        key={index}
                                        onClick={() => handleQuestionClick(faq)}
                                        onMouseEnter={() => setHoveredIndex(index)}
                                        onMouseLeave={() => setHoveredIndex(null)}
                                        style={{
                                            cursor: 'pointer',
                                            color: 'black',
                                            backgroundColor: hoveredIndex === index ? '#e0e0e0' : 'transparent',
                                            margin: '5px 0',
                                            padding: '5px',
                                        }}
                                    >
                                        {faq.question}
                                    </div>
                                ))
                            ) : (
                                categories.map((category, index) => (
                                    <div
                                        key={index}
                                        onClick={() => handleCategoryClick(category)}
                                        onMouseEnter={() => setHoveredIndex(index)}
                                        onMouseLeave={() => setHoveredIndex(null)}
                                        style={{
                                            cursor: 'pointer',
                                            color: 'black',
                                            fontWeight: 'bold',
                                            backgroundColor: hoveredIndex === index ? '#e0e0e0' : 'transparent',
                                            margin: '5px 0',
                                            padding: '5px',
                                        }}
                                    >
                                        {category.title}
                                    </div>
                                ))
                            )}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
};

export default FAQComponent;